<template>
  <div>
    <span style="line-height: 100px; font-weight: bolder; margin: 0 20px">
      缴费编号：{{ data.list[0].manageId }}
    </span>
  </div>
  <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="基本信息" name="first">
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="contractInfo.houseId"
          label="房屋编号"
          min-width="25%"
        />
        <el-table-column
          prop="contractInfo.contractId"
          label="合同编号"
          min-width="25%"
        />
        <el-table-column
          prop="contractInfo.userId"
          label="签约方"
          min-width="25%"
        />
        <el-table-column
          prop="contractInfo.startTime"
          label="合同开始时间"
          min-width="25%"
        />
      </el-table>
      <el-table
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        :data="data.list"
        stripe
        style="width: 100%"
      >
        <el-table-column
          prop="contractInfo.endTime"
          label="合同完结时间"
          min-width="25%"
        />
        <el-table-column prop="month" label="缴费月账期" min-width="25%" />
        <el-table-column label="是否欠费" min-width="25%">
          <template #default="scope">
            <div
              v-if="scope.row.paymentRecord.paymentType != null"
              style="color: #13ce66;"
            >
              否
            </div>
            <div v-else style="color: red;">是</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="paymentRecord.updateDate"
          label="更新时间"
          min-width="25%"
        />
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="缴费项" name="second">
      <el-table
        :data="bill.RECORDS"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column prop="name" label="缴费项" />
        <el-table-column prop="price" label="应缴费金额" />
        <el-table-column label="缴费日期">每月15号</el-table-column>
        <el-table-column label="缴费账期">
          <div>{{ data.list[0].month }}</div>
        </el-table-column>
        <el-table-column prop="personname" label="是否缴费" />
        <!-- <el-table-column prop="unit" label="备注" /> -->
      </el-table>
    </el-tab-pane>
    <el-tab-pane label="缴费记录" name="third">
      <el-table
        :data="
          payMessage.filter(item => item.paymentRecord.paymentType != null)
        "
        style="width: 100%; margin-bottom: 20px"
        border
      >
        <el-table-column prop="month" label="账单期" />
        <el-table-column prop="dosage" label="缴费金额" />
        <el-table-column prop="paymentRecord.createDate" label="缴费时间" />
        <el-table-column label="缴费状态">
          <div style="color: #13ce66;">缴费成功</div>
        </el-table-column>
        <el-table-column prop="paymentRecord.paymentId" label="付款账号" />
        <el-table-column prop="contractInfo.userId" label="付款人" />
        <el-table-column prop="paymentRecord.paymentType" label="付款方式" />
      </el-table>
    </el-tab-pane>
  </el-tabs>
</template>
<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getBill } from '@/api/contract'
import { selectConPayList } from '@/api/charge'
const data = reactive({
  list: [],
})
var bill = ref([])
var payMessage = ref([])
var router = useRoute()
// data.list = null
data.list.push(JSON.parse(router.query.rowData))
onMounted(async () => {
  console.log(
    data.list[0].housesId,
    data.list[0].contractInfo.userId,
    data.list[0].contractInfo.contractId
  )
  bill.value = await getBill()
  payMessage.value = (
    await selectConPayList(
      data.list[0].housesId,
      data.list[0].contractInfo.userId,
      data.list[0].contractInfo.contractId
    )
  ).data
})
// setTimeout(async () => {
//   console.log(data.list[0].housesId,data.list[0].contractInfo.userId,data.list[0].contractInfo.contractId);
//   payMessage.value = (await selectConPayList(data.list[0].housesId,data.list[0].contractInfo.userId,data.list[0].contractInfo.contractId)).data
//   console.log(111);
//   console.log(payMessage.value);
// }, 5000);
// async function payMess() {
//   console.log(data.list[0].housesId,data.list[0].contractInfo.userId,data.list[0].contractInfo.contractId);
//   payMessage.value = (await selectConPayList(data.list[0].housesId,data.list[0].contractInfo.userId,data.list[0].contractInfo.contractId)).data
//   console.log(111);
//   console.log(payMessage.value);
// }
</script>
